#{extends 'main.html' /}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Create</title>

</head>
<script type="text/javascript">


function isNumberKey(evt)
{
   var charCode = (evt.which) ? evt.which : event.keyCode;
   if (charCode != 46 && charCode > 31 
     && (charCode < 48 || charCode > 57))
      return false;

   return true;
}





	function fill1() {

		var total_price = document.getElementsByName("total1_price");

		var quantity = document.getElementsByName("quantity1");
		var price = document.getElementsByName("item1_price");

		var result = quantity[0].value * price[0].value;
		total_price[0].value = result;

	}
	function fill2() {

		var total_price = document.getElementsByName("total2_price");

		var quantity = document.getElementsByName("quantity2");
		var price = document.getElementsByName("item2_price");

		var result = quantity[0].value * price[0].value;
		total_price[0].value = result;

	}
	function fill3() {

		var total_price = document.getElementsByName("total3_price");

		var quantity = document.getElementsByName("quantity3");
		var price = document.getElementsByName("item3_price");

		var result = quantity[0].value * price[0].value;
		total_price[0].value = result;

	}
	function fill4() {

		var total_price = document.getElementsByName("total4_price");

		var quantity = document.getElementsByName("quantity4");
		var price = document.getElementsByName("item4_price");

		var result = quantity[0].value * price[0].value;
		total_price[0].value = result;

	}
	function fill5() {

		var total_price = document.getElementsByName("total5_price");

		var quantity = document.getElementsByName("quantity5");
		var price = document.getElementsByName("item5_price");

		var result = quantity[0].value * price[0].value;
		total_price[0].value = result;

	}
</script>
<body>
	#{if flash.error}
	<p style="color: #c00">${flash.error}</p>


	#{/if}


	<form action="@{Contracts.create()}" method="post">

		<table align="center" border="4">
			<tr>
				<td><b> Name 1:</b>
				</td>
				<td><input type="text" name="name1" required /></td>
			</tr>
			<tr>
				<td><b> Name 2:</b></td>
				<td><input type="text" name="name2" /></td>
			</tr>

			<tr>
				<td><b> Mobile 1 : </b></td>
				<td><input type="text" name="mobile1"
					onkeypress="return isNumberKey(event)" required /></td>
			</tr>
			<tr>
				<td><b> Mobile 2 : </b></td>
				<td><input type="text" name="mobile2"
					onkeypress="return isNumberKey(event)" /></td>
			</tr>
			<tr>
				<td><b> Phone 1 : </b></td>
				<td><input type="text" name="phone1"
					onkeypress="return isNumberKey(event)" /></td>
			</tr>
			<tr>
				<td><b> Phone 2 : </b></td>
				<td><input type="text" name="phone2"
					onkeypress="return isNumberKey(event)" /></td>
			</tr>

			<tr>
				<td><b>Contract id</b></td>
				<td><input type="text" id="contract_id" name="contract_id" required  /></td>

			</tr>
			<tr>
				<td><b>Year </b></td>
				<td><input type="text" id="year" name="year"
					onkeypress="return isNumberKey(event)" required/></td>
			</tr>
			<tr>
				<td><b>Date : </b></td>
				<td><input id="date" type="date" name="date" required /></td>
			</tr>

			<tr>
				<td><b>Address : </b></td>
				<td><input type="text" name="address" required /></td>
			</tr>
			<tr>
				<td><b> Area :</b></td>

				<td><select name="area">
						<option>A</option>
						<option>B</option>
						<option>C</option>
				</select></td>
			</tr>

			<tr>
				<td><b> No of change/Month :</b></td>
				<td><select name="no_of_change_per_month">
						<option value="0">none</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="4">4</option>
				</select></td>
			</tr>
			<tr>
				<td><b> Products :</b></td>
			</tr>
			<tr>
				<td><select name="Product1" style="width: 100px;">
						<option value="none">none</option>
						<option value="Mop18">Mop18</option>
						

				</select></td>
				<td><b> Quantity :</b> <input type="text" id="quantity1"
					name="quantity1" onchange="fill1()"
					onkeypress="return isNumberKey(event)" required />
				</td>
				<td><b> Price :</b> <input type="text" name="item1_price" onchange="fill1()" onkeypress="return isNumberKey(event)" required />
				</td>
				<td><b> Total Price :</b> <input type="text"
					name="total1_price" disabled="disabled" /></td>
				<td><b> Smell :</b> <select name="smell1">
						<option value="ياسمين">ياسمين</option>
						<option value="فرولة">فرولة</option>
						<option value="ليمون">ليمون</option>
						<option value="خوخ"> خوخ </option>

				</select></td>
				<td><b> Floor Type :</b> <select name="floor_type1"'>
						<option>سيراميك</option>
						<option>بلاط</option>
						<option>HDF</option>

				</select></td>
			</tr>
			<tr>
				<td><select name="Product2" style="width: 100px;">
						<option value="none">none</option>
						
						<option value="Mit">Mit</option>
					
				</select></td>
				<td><b> Quantity :</b> <input type="text" id="quantity2"
					name="quantity2" onchange="fill2()"
					onkeypress="return isNumberKey(event)" /></td>
				<td><b> Price :</b> <input type="text" name="item2_price"
					onchange="fill2()" onkeypress="return isNumberKey(event)" /></td>
				<td><b> Total Price :</b> <input type="text"
					name="total2_price" disabled="disabled" /></td>
				<td><b> Smell :</b> <select name="smell2">
						<option value="jasmine">ياسمين</option>
						<option value="straw">فرولة</option>
						<option value="lemon">ليمون</option>
						<option value="5o5">خوخ</option>

				</select></td>
				<td><b> Floor Type :</b> <select name="floor_type2"'>
						<option>سيراميك</option>
						<option>بلاط</option>
						<option>HDF</option>

				</select></td>

			</tr>
			<tr>
				<td><select name="Product3" style="width: 100px;">
						<option value="none">none</option>
						
						<option value="HD1">HD1</option>
						
				</select></td>
				<td><b> Quantity :</b> <input type="text" id="quantity3"
					name="quantity3" onchange="fill3()"
					onkeypress="return isNumberKey(event)" /></td>
				<td><b> Price :</b> <input type="text" name="item3_price"
					onchange="fill3()" onkeypress="return isNumberKey(event)" /></td>
				<td><b> Total Price :</b> <input type="text"
					name="total3_price" disabled="disabled" /></td>
				<td><b> Smell :</b> <select name="smell3">
						<option value="jasmine">ياسمين</option>
						<option value="straw">فرولة</option>
						<option value="lemon">ليمون</option>
						<option value="5o5">خوخ</option>
				</select></td>
				<td><b> Floor Type :</b> <select name="floor_type3"'>
						<option>سيراميك</option>
						<option>بلاط</option>
						<option>HDF</option>

				</select></td>

			</tr>
			<tr>
				<td><select name="Product4" style="width: 100px;">
						<option value="none">none</option>
						
						<option value="HD2">HD2</option>
						
				</select></td>
				<td><b> Quantity :</b> <input type="text" name="quantity4"
					id="quantity4" onchange="fill4()"
					onkeypress="return isNumberKey(event)" required /></td>
				<td><b> Price :</b> <input type="text" name="item4_price"
					onchange="fill4()" onkeypress="return isNumberKey(event)" /></td>
				<td><b> Total Price :</b> <input type="text"
					name="total4_price" disabled="disabled" /></td>
				<td><b> Smell :</b> <select name="smell4">
						<option value="jasmine">ياسمين</option>
						<option value="straw">فرولة</option>
						<option value="lemon">ليمون</option>
						<option value="5o5">خوخ</option>
				</select></td>
				<td><b> Floor Type :</b> <select name="floor_type4"'>
						<option>سيراميك</option>
						<option>بلاط</option>
						<option>HDF</option>

				</select></td>
			</tr>
			<tr>
				<td><select name="Product5" style="width: 100px;">
						<option value="none">none</option>
						
						<option value="Mop36">Mop36</option>
				</select></td>
				<td><b> Quantity :</b> <input type="text" id="quantity5"
					name="quantity5" onchange="fill5()"
					onkeypress="return isNumberKey(event)" /></td>
				<td><b> Price :</b> <input type="text" name="item5_price"
					onchange="fill5()" onkeypress="return isNumberKey(event)" /></td>
				<td><b> Total Price :</b> <input type="text"
					name="total5_price" disabled="disabled" /></td>
				<td><b> Smell :</b> <select name="smell5">
						<option value="jasmine">ياسمين</option>
						<option value="straw">فرولة</option>
						<option value="lemon">ليمون</option>
						<option value="5o5">خوخ</option>
				</select></td>

				<td><b> Floor Type :</b> <select name="floor_type5"'>
						<option>سيراميك</option>
						<option>بلاط</option>
						<option>HDF</option>

				</select></td>
			</tr>

			<tr>
				<td><input type="submit" /></td>
			</tr>


		</table>
		
			</form>
		<script>
		 $(document).ready(function() {
             // create NumericTextBox from input HTML element

              $("#quantity1").kendoNumericTextBox({
            	 decimals: 0,
            	 min: 0,
            	 value: 0,
                 step: 1,
                 format: "#"
             });
              $("#quantity2").kendoNumericTextBox({
             	 decimals: 0,
             	 min: 0,
             	value: 0,
                  step: 1,
                  format: "#"
              });
              $("#quantity3").kendoNumericTextBox({
             	 decimals: 0,
             	 min: 0,
             	value: 0,
                  step: 1,
                  format: "#"
              });
              $("#quantity4").kendoNumericTextBox({
             	 decimals: 0,
             	 min: 0,
             	value: 0,
                  step: 1,
                  format: "#"
              });
              $("#quantity5").kendoNumericTextBox({
             	 decimals: 0,
             	 min: 0,
             	value: 0,
                  step: 1,
                  format: "#"
              });
              
              
              
              
			 $("#contract_id").kendoNumericTextBox({
            	 decimals: 0,
            	 min: 0,
                 step: 1,
                 format: "#"
             });
             
			 $("#year").kendoNumericTextBox({
            	 decimals: 0,
            	 min: 0,
                 step: 1,
                 format: "#"
             });
			 status = $(".status");
			
             
              });
		 
		</script>


		<div id="grid"></div>



		<script>
		/*
                $(document).ready(function () {
                	
                    dataSource = new kendo.data.DataSource({
                    	
                        transport: {
                        	
                            read:  {
                                url: "@{Application.jsonProducts()}",
                                dataType: "json"
                            },
                            update: {
                                url: "@{Application.Update()}",
                                dataType: "application/json"
                                
                            },
                            create: {
                                url: "@{Application.CreateProduct()}",
                                dataType: "json"
                            },
                            destroy: {
                                url: "@{Application.Delete()}",
                                dataType: "json"
                            },
                            parameterMap: function(options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {products: kendo.stringify(options.models)};
                                }
                            }
                        },
                        batch: true,
                        pageSize: 10,
                        requestEnd: onRequestEnd,
                        schema: {
                            model: {
                            	id:"id",
                                fields: {
                                	
                                	name: { editable: true, nullable: false, validation: { required: true }},
                                	quantity: { type: "number", validation: { min: 0, required: true } },
                                	number_of_changes: { type: "number", validation: { min: 0, required: true } },
                                	price:{type: "number", validation: { min: 0, required: true }, editable: true, nullable: false},
                                	total_price:{type: "number", validation: { min: 0, required: true }, editable: false, nullable: false},
                                	smell: { editable: true, nullable: false,validation: { required: true } },
                                	floor_type: { editable: true, nullable: false,validation: { required: true } }
                                }
                            }
                        }
                    });
                	
                    $("#grid").kendoGrid({
                    	dataSource:dataSource,
                        pageable: true,
                        height: 430,
                        toolbar: ["create", "save", "cancel"],
                        columns: [
                                  { field: "name", title: "Prouct Name", width: 10 },
                                  { field: "quantity", title: "Quantity",width:10},
                                  { field: "number_of_changes", title: "Number of Changes Per Month",width:20},
                                  { field: "price", title: "Price",width:20 },
                                  { field: "total_price", title: "Total Price",width:20, template: "#= quantity * price #"},
                                  { field: "smell", title: "Smell", width: 10 },
                                  { field: "floor_type", title: "Floor Type", width: 10 },
                                  
                                  
                                  { command: "destroy", title: "&nbsp;", width: 20 }],
                        editable: true
                    });
                });
                function onRequestEnd(evt) {
                	  if (evt.type != "read") {
                	        evt.sender.read();
                	    }
                }
                
                */
            </script>
</body>
</html>
